<template>
	<view class="app">
		<!-- <MyHead></MyHead> -->
		<!-- <MyNav></MyNav> -->
		<scroll-view scroll-x class="nav text-center index" :style="style">
			<view class="cu-item left" :class="'text-white'">
				<text class="cuIcon cuIcon-sort"></text>
			</view>
			<view class="cu-item" :class="'text-white'">
				<text class="cuIcon" :class="'text-white'">网易云音乐</text>
			</view>
			<view class="cu-item right" :class="'text-white'">
				<text class="cuIcon cuIcon-search"></text>
			</view>
		</scroll-view>
		<view class="recommend" :style="top">
			<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" :fixed="false">
				<banner :bannerList="bannerList"></banner>
				<Recommend :recommendList="recommendList" :songList="songList"></Recommend>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	// import MyHead from '../../common/Head.vue'
	// import MyNav from '../../common/Nav.vue'
	import Banner from '../../common/banner.vue'
	import Recommend from '../recommend/index.vue'
	import MescrollUni from "../../common/mescroll-uni/mescroll-uni.vue";
	export default {
		components:{
			Banner,Recommend,MescrollUni
		},
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
			top(){
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				// #ifndef MP
					var top = `top:${CustomBar}px;padding-bottom:${CustomBar}px;`;
				// #endif
				// #ifdef APP-PLUS
					var top = `top:${CustomBar}px;padding-bottom:0px;`;
				// #endif
				// #ifdef MP-WEIXIN
					var top = `top:${CustomBar}px;`;
				// #endif	
				return top
			},
			mstop(){
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var mstop = `top:${CustomBar}px;padding-top:${CustomBar}px`;
				return mstop
			}
		},
		data() {
			return {
				// 下拉刷新的配置
				downOption: { 
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				upOption: {
					use: false
				},
				bannerList:[],//banner列表数据
				recommendList:[],//推荐歌单列表数据
				songList:[],//推荐歌曲列表数据
				TabCur: 0,
				scrollLeft: 0
			}
		},
		onLoad() {
			
		},
		methods: {
			downCallback(mescroll){
					// 第1种: 请求具体接口,banner接口
					uni.request({
						url: 'http://47.100.48.11:4000/banner',
						success: (res) => {
							if(res.data.code == 200){
								let list = res.data.banners
								this.bannerList = list.splice(5,9)//取4个
								// 成功隐藏下拉加载状态
								setTimeout(()=>{
									mescroll.endSuccess()
								},2000)
							}
						},
						fail: () => {
							// 失败隐藏下拉加载状态
							mescroll.endErr()
						}
					})
					// 第1种: 请求具体接口,推荐歌单列表接口
					uni.request({
						url:'http://47.100.48.11:4000/personalized',
						success:(res)=>{
							if(res.data.code == 200){
								this.recommendList = res.data.result.splice(0,9)//取9个
							}
						},
						fail: () => {
							// 失败隐藏下拉加载状态
							mescroll.endErr()
						}
					})
					// 第1种: 请求具体接口,推荐歌单列表接口
					uni.request({
						url:'http://47.100.48.11:4000/personalized/newsong',
						success:(res)=>{
							if(res.data.code == 200){
								this.songList = res.data.result.splice(0,9)//取9个
							}
						},
						fail: () => {
							// 失败隐藏下拉加载状态
							mescroll.endErr()
						}
					})
					
				},
				upCallback(){
					console.log('继续拉啊！！！')
				}
		}
	}
</script>

<style lang="scss">
	.app{
		.index{
			background: #d44439;
			display: flex;
			justify-content: space-between;
			position: fixed;
			z-index: 999999;
			.left{
				position: absolute;
				left: 0;
			}
			.right{
				position: absolute;
				right: 0;
			}
			.cuIcon{
				font-size: 30upx;
			}
		}
		.recommend{
			height: 100%;
			position: relative;
		}
	}
</style>
